<template>
  <view class="page">
    <nav-bar>
      <template #title>修改密码</template>
    </nav-bar>
    <view class="container">
      <view class="pwd-con">
        密码格式为：由大写字母开头，大小写字母、数字、特殊字符中的至少3种组成8～30位字符串
      </view>
      <avant-form
        ref="formRules"
        v-model="form"
        :option="options"
        @submit="submitPwd"
      >
      </avant-form>
      <view class="sub-btn">
        <van-button
          type="primary"
          round
          size="large"
          @click="proxy.$refs.formRules.submit()"
          >提交</van-button
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import formOption from "./formOption";
const { proxy } = getCurrentInstance();
// 密码校验规则
const isPwdValid = (value: string) => {
  console.log(value);
  const regxe =
    /^([A-Z])(?=.*?[a-z])(?=.*?\d)(?=.*?[~!@#$%^&*])[a-zA-Z\d!#@*&.]{7,30}$/.test(
      value
    );
  if (value && !regxe) {
    return false;
  } else {
    return true;
  }
};
const isPwdConfirm = (value: string) => {
  return value === form.value.newPwd;
};
const form = ref({
  oldPwd: "FjsY@0894",
  newPwd: "",
  confirmPwd: "",
});
const options = computed(() => {
  return formOption(isPwdValid, isPwdConfirm);
});
function submitPwd() {
  console.log("submitPwd");
  uni.showToast({
    title: "密码修改成功",
    icon: "success",
  });
  setTimeout(() => {
    navigateBack();
  }, 1000);
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 46px);
  .pwd-con {
    padding: 0 16px;
  }
  .sub-btn {
    margin: 16px;
  }
}
</style>
